<template>
  <div class="p-express-info">
    <n-spin :show="loading">
      <n-table v-if="list && list.length">
        <thead>
          <tr>
            <th width="90">时间</th>
            <th>快递详情</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <td>{{ item.AcceptTime }}</td>
            <td>{{ item.AcceptStation }}</td>
          </tr>
        </tbody>
      </n-table>
      <n-empty v-if="list && list.length === 0" />
    </n-spin>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs } from 'vue'
  import { NTable, NSpin, NEmpty, useDialog } from 'naive-ui'
  import { useStore } from '@/store'
  import { useRouter } from 'vue-router'

  export default defineComponent({
    name: 'PExpressInfo',
    components: {
      NEmpty,
      NSpin,
      NTable
    },
    props: {
      orderId: {
        type: String,
        default: ''
      },
      // 1-订单物流；2-售后退款物流
      type: {
        type: [Number, String],
        default: 1
      }
    },
    setup($props) {
      const $router = useRouter()
      const $dialog = useDialog()
      const $store = useStore()
      const $state = reactive({
        list: null,
        loading: true
      })

      $store
        .dispatch('order/getExpressInfo', {
          orderId: $props.orderId,
          type: $props.type
        })
        .then((res) => {
          $state.list = res.data || []
          $state.loading = false
        })
        .catch((err) => {
          $state.loading = false
          $state.list = []
          // code码为8719的时候，表示需要去充值了
          if (parseInt(err.code) === 8719) {
            $dialog.error({
              title: '物流查询服务条数不足',
              content: '当前物流查询服务条数为0，需充值后方可查询物流',
              positiveText: '取消',
              negativeText: '去充值',
              onNegativeClick: () => {
                $router.push({
                  name: 'OrderSettingsLogistics'
                })
              }
            })
          }
        })

      return {
        ...toRefs($state)
      }
    }
  })
</script>

<style lang="scss" scoped>
  .p-express-info {
    width: 400px;
    min-height: 80px;
    max-height: 500px;
    overflow: auto;
    td,
    th {
      font-size: 12px;
    }
    tbody {
      tr:first-child td {
        color: #fd494d;
      }
    }
  }
</style>
